<template>
  <div v-if="list.length > 0">
    <div class="waringTip">
      <div class="tipContent">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="tipList"
          @click="toArticle(item)"
        >
          <div class="tipText text-clamp">{{ item.noticeTitle }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GetContentNoticeList, GetContentTypeList } from '@/api/contentnotice';

export default {
  props: {
    title: {
      type: String,
      default: '',
      required: true
    }
  },
  data() {
    return {
      typeList: [],
      dataType: '',
      current: 1,
      pageSize: 5,
      list: [],
      // basicUrl: process.env.VUE_APP_BASE_API + '/api/'
      basicUrl: ''
    };
  },
  created() {
    this.basicUrl = window.location.origin + '/api/';
    this.getType();
  },
  mounted() {},
  methods: {
    // 获取数据类型表
    getType() {
      const formData = new FormData()
      // 第一个值是key,第二个是value
      formData.append('current', 1)
      formData.append('size', 999)
      const params = new URLSearchParams(formData)
      GetContentTypeList(params).then((res) => {
        this.typeList = res.data.records;
        this.typeList.forEach((item) => {
          if (item.typeName === this.title) {
            this.dataType = item.id;
            this.getData();
          }
        });
      });
    },
    // 获取内容列表
    async getData() {
      const obj = {
        current: this.current,
        size: this.pageSize,
        typeId: this.dataType,
        status: 4
      };
      try {
        const result = await GetContentNoticeList(obj);
        this.list = result.data.records;
      } catch (e) {
        console.log(e);
      }
    },

    // 跳转内容页
    toArticle(item) {
      const obj = {
        id: item.id
      };
      // this.$router.push({ path: "/article", query: obj });
    }
  }
};
</script>

<style lang="less" scoped>
@aaa:192;
.text-clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
  word-break: break-all;
  text-align: justify;
  // text-align-last: justify;
}

.waringTip {
  : 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  .tipContent {
    .tipList {
      width: (300rem / @aaa);
      height: (67rem / @aaa);
      // background-color: #4497f7;
      margin-bottom: (10rem / @aaa);
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom: (1rem / @aaa) dashed #024da0;
      .tipText {
        width: (300rem / @aaa);
        font-size: (20rem / @aaa);
        font-family: 思源黑体 CN Medium;
        -webkit-line-clamp: 1;
        line-height: (67rem / @aaa);
        text-align: center;
      }
    }
  }
}
</style>
